import React, { StrictMode } from 'react'

const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
}
const flexBox = {
  display: 'flex',
  justifyContent: 'space-around',
  flexWrap: 'wrap',
}

// React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：
// React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
// 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

// react的事件委托

export class EventTemplate extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isToggleOn: true }

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick1 = this.handleClick1.bind(this)
  }
  // 修改this指向的三种方式
  handleClick1() {
    console.log('handleClick1...', this.state.isToggleOn)
  }
  handleClick2() {
    console.log('handleClick2...', this.state.isToggleOn)
  }
  handleClick3() {
    console.log('handleClick2...', this.state.isToggleOn)
  }

  // 显示传递参数
  // 使用箭头函数需要显示传递event
  sendParam1(data, event, aaa, bbb) {
    console.log('sendParam1...', data, event, aaa, bbb)
  }
  // 会在末尾自动添加event
  sendParam2(data, event, aaa, bbb) {
    console.log('sendParam1...', data, event, aaa, bbb)
  }

  // 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式地使用 preventDefault。
  handleSubmit(e) {
    console.log('handleSubmit...', e)
    // 此处的e是react的合成事件
    // SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。
    // 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
    // 通过SyntheticEvent.nativeEvent 获取原生事件
    e.preventDefault()
    console.log('You clicked submit.')
  }
  render() {
    return (
      <div style={boxStyle}>
        <form onsubmit="console.log('You clicked submit.'); return false">
          <button type="submit">Submit</button>
        </form>

        <form onSubmit={this.handleSubmit}>
          <button type="submit">阻止Submit</button>
        </form>
        <button onClick={this.handleClick1}>在中修改this指向</button>
        <button onClick={() => this.handleClick2()}>箭头函数修改this指向</button>
        <button onClick={this.handleClick3.bind(this)}>bind修改 指向</button>
        <br />
        {/* 传递自定箭头函数, 箭头函数内部直接是调用 */}
        <button onClick={(e) => this.sendParam1(11111, e)}>Delete Row</button>
        {/* 传递的是bind返回的函数, 参数设定为后面值 */}
        <button onClick={this.sendParam2.bind(this, 11111, 22222)}>Delete Row</button>
      </div>
    )
  }
}
